import React,{Fragment} from 'react'
import { Input,Button, List} from 'antd';

//只有render时，可使用 无状态组件(性能比较高)，适合定义UI组件
const TodoListUI = (props) =>{
    return (
        <Fragment>
            <div style={{margin:'20px 10px'}}>
                <Input 
                    value={props.inputValue} 
                    style={{width:'300px'}} 
                    onChange={props.handleInputChange}
                />
                <Button type="primary" onClick={props.handleClick}>提交</Button>
           </div>
           <List
                style={{margin:'10px',width:'500px'}}
                bordered
                dataSource={props.list}
                renderItem={(item,index) => (
                    <List.Item  onClick={()=>{props.handleItemDelete(index)}}>
                         {item}
                    </List.Item>
                )}
            />
        </Fragment>
    )
}

export default TodoListUI;
